//管理自定义Hooks
import { ref, computed, reactive } from 'vue';

/**
 * 自定义Hook来获取当前索引和设置索引的方法供视图使用
 * @param {*} initialIndex 初始索引值
 * @returns [targetIndex, setTargetIndex]:[当前索引, 设置索引的方法]
 */
export function useTargetIndex(initialIndex) {
  const targetIndex = ref(initialIndex);

  function setTargetIndex(newIndex) {
    targetIndex.value = Number(newIndex);
  }

  return [targetIndex, setTargetIndex];
}

/**
 * 获取响应式包装和初始化右侧栏数据和设置该数据的方法供视图使用
 * @param {*} initialData 初始数据
 * @param {*} checkedData 某一侧选中项的容器数据
 * @returns [rightListData, addRightListData, removeRightListData]:[右侧栏数据, 增数据的方法, 删数据的方法]
 */
export function useRightListData(initialData, checkedData) {
  const rightListData = ref(initialData);

  //将左侧某项移动到右侧容器中
  function addRightListData(newData) {
    //将数组数据合并
    rightListData.value = [...rightListData.value, ...newData];

    //移动完毕时清空左侧容器的某项
    checkedData.left = [];
  }

  //将右侧容器中的某项移动至左侧容器
  function removeRightListData(newData) {
    newData.forEach((newItem) => {
      //过滤不符合的项
      rightListData.value = rightListData.value.filter(
        (item) => item.id !== newItem.id
      );
    });

    //移动完毕时清空右侧容器的某项
    checkedData.right = [];
  }

  return [rightListData, addRightListData, removeRightListData];
}

/**
 * 获取响应式包装和选中数据的左右容器和设置该数据的方法供视图使用
 * @returns [checkedData, addCheckedData, removeCheckedData]:[选中的左右容器, 增数据的方法, 删数据的方法]
 */
export function useCheckedData() {
  const checkedData = reactive({
    left: [],
    right: []
  });

  function addCheckedData(leftOrRight, item) {
    switch (leftOrRight) {
      case 'left':
        checkedData.left.push(item);
        break;
      case 'right':
        checkedData.right.push(item);
        break;
      default:
        break;
    }
  }

  function removeCheckedData(leftOrRight, id) {
    switch (leftOrRight) {
      case 'left':
        checkedData.left = checkedData.left.filter((item) => item.id !== id);
        break;
      case 'right':
        checkedData.right = checkedData.right.filter((item) => item.id !== id);
        break;
      default:
        break;
    }
  }

  return [checkedData, addCheckedData, removeCheckedData];
}

/**
 *拖拽某一项
 @returns [dragedItem, setDragedItem]:[被拖拽的那一项, 切换某一项的方法]
 */
export function useDragedItem() {
  const dragedItem = ref(null);

  //不停拖拽会切换项
  function setDragedItem(item) {
    dragedItem.value = item;
  }

  return [dragedItem, setDragedItem];
}

/**
 * 自定义Hook来计算获取data数组中某项属性(可拓展其他属性)供视图使用
 * @param {*} data props定义的data数组数据
 * @param {*} targetIndex 当前option标签的索引
 * @param {*} rightListData 右侧列表栏的数据
 * @returns {*} 对象包含计算后的属性
 */
export function useComputedData(data, targetIndex, rightListData, checkedData) {
  //左侧栏标题属性
  const leftTitle = computed(() => data[targetIndex.value].title);

  //左侧栏数据属性
  const leftListData = computed(() => {
    //获取某一项里的data属性并别名currentData
    const { data: currentData } = data[targetIndex.value];

    //过滤
    return currentData.filter((item) => {
      //从右侧栏的列表数据里查找是否符合id的那一项
      const isFind = rightListData.value.find(({ id }) => item.id === id);

      //找不到时
      if (!isFind) {
        //返回找不到的其余列表项内容
        return item;
      }
    });
  });

  //中间左右侧按钮是否禁用属性
  const transferBtnDisabled = computed(() => ({
    //右侧容器没有内容时禁止点击左侧按钮
    left: checkedData.right.length === 0,
    //反之
    right: checkedData.left.length === 0
  }));

  return {
    leftTitle,
    leftListData,
    transferBtnDisabled
  };
}
